﻿<template>
  <l-layout class="l-tab-page" v-if="!lr_loadPage">
    <l-panel>
      <template #toolLeft>
        <l-query2
          :items="queryItems"
          :formData="queryData"
          :loading="tableLoading"
          @search="handleSearch"
        >
          <template #f_Code>
            <el-input v-model="queryData.f_Code" :placeholder="$t('please enter')" />
          </template>
          <template #f_Name>
            <el-input v-model="queryData.f_Name" :placeholder="$t('please enter')" />
          </template>
        </l-query2>
      </template>
      <template #toolRight>
        <l-tool-btns
          :btnText="$t('上传插件')"
          :hasTableSetting="true"
          @setting="lr_handleSettingTable"
          @click="handleAdd()"
        >
          <l-excel-btns></l-excel-btns>
        </l-tool-btns>
      </template>
      <l-table
        ref="mainTable"
        :loading="tableLoading"
        :columns="lr_getPageColumns(columns)"
        :dataSource="tableData"
        :isPage="true"
        :pageTotal="tableTotal"
        :tablePage.sync="tableCurrentPage"
        @loadPageData="turnTablePage"
      >
        <!-- 插件状态 -->
        <template v-slot:f_State="scope">
          <el-tag v-if="scope.row.f_State == 1" size="mini" type="success"
            >运行中</el-tag
          >
          <el-tag v-else size="mini" type="info">未运行</el-tag>
        </template>
        <l-table-btns
          :btns="tableBtns"
          :btnNum="4"
          @click="lr_handleTableBtnClick"
        ></l-table-btns>
      </l-table>
    </l-panel>
    <!--表单-->
    <l-dialog
      :title="$t(formTitle)"
      :visible.sync="formVisible"
      :height="450"
      :width="600"
      :hidden="isHide"
      :hasBtns="!formDetails"
      @ok="handleSave"
      @close="handleCloseForm"
      @opened="handleOpenedForm"
    >
      <my-form ref="form" :isReadOnly="formDetails"></my-form>
    </l-dialog>
  </l-layout>
</template>

<script>
import MyForm from "./form";
const api = window.$api.plugin.pluginconfig;
export default {
  components: {
    MyForm,
  },
  data() {
    return {
      lr_isPage: true,
      moduleCode: "plugin_config",
      // query参数
      queryData: {
        f_Code: "",
        f_Name: "",
      },
      queryItems: [
        {
          label: "编号",
          prop: "f_Code",
        },
        {
          label: "插件名称",
          prop: "f_Name",
        },
      ],
      // 表格参数
      tableLoading: false,
      tableData: [],
      tableTotal: 0,
      tableCurrentPage: 1,
      tablePageSize: 50,
      columns: [
        {
          label: "编号",
          prop: "f_Code",
          minWidth: 80,
          align: "left",
        },
        {
          label: "名称",
          prop: "f_Name",
          minWidth: 150,
          align: "left",
        },
        {
          label: "版本号",
          prop: "f_Version",
          width: 80,
          align: "center",
        },
        { label: "状态", prop: "f_State", width: 80, align: "center" },
        {
          label: "修改时间",
          prop: "f_ModifyDate",
          width: 160,
          align: "left",
          dataType: "datetime",
          format: "yyyy-MM-dd HH:mm:ss",
          isNotAutoWrap: true,
        },
        {
          label: "修改人",
          prop: "f_ModifyUserId",
          width: 120,
          dataType: "user",
          isNotAutoWrap: true,
        },
      ],
      tableBtns: [
        { prop: "Enable", label: "启用",width:40 },
        { prop: "Uninstall", label: "卸载",width:40 },
        { prop: "Details", label: "Details",width:40 },
        { prop: "Delete", label: "Delete",width:40 },
      ],
      // 表单参数
      formVisible: false,
      formTitle: "",
      formEditRow: null,
      formEdit: false,
      formDetails: false,
      // 打印
      printType: "word",
      isPrint: false,
      printLoading: null,
      isHide: false,
    };
  },
  computed: {},
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.loadTableData();
    },
    handleSearch() {
      this.loadTableData();
    },
    turnTablePage({ rows }) {
      this.tablePageSize = rows;
      this.loadTableData(true);
    },
    async loadTableData(isNotFirst) {
      if (!isNotFirst) {
        this.tableCurrentPage = 1;
      }
      this.tableLoading = true;
      let queryData = this.$deepClone(this.queryData);
      queryData.rows = this.tablePageSize;
      queryData.page = this.tableCurrentPage;
      queryData.sidx = "F_Id";
      let data = await this.$awaitWraper(api.getPage(queryData));
      if (data != null) {
        this.tableData = data.rows;
        this.tableTotal = data.records;
      } else {
        this.tableData = [];
      }
      this.tableLoading = false;
    },
    handleAdd() {
      this.formEdit = false;
      this.formDetails = false;
      this.handleShowForm("Add");
    },
    handleEdit($index, row) {
      this.formEdit = true;
      this.formDetails = false;
      this.formEditRow = row;
      this.handleShowForm("Edit");
    },
    handleDelete($index, row) {
      this.$confirm(
        this.$t("This operation will permanently delete the data. Do you want to continue?"),
        this.$t("Tips"),
        {
          confirmButtonText: this.$t("confirm"),
          cancelButtonText: this.$t("cancel"),
          type: "warning",
        }
      )
        .then(async () => {
          this.tableData.splice($index, 1);
          this.tableTotal--;
          await api.remove(row.f_Id);
          this.$message({
            type: "success",
            message: this.$t("Delete  success"),
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: this.$t("Delete has been canceled!"),
          });
        });
    },
    handleDetails($index, row) {
      this.formEdit = true;
      this.formDetails = true;
      this.formEditRow = row;
      this.handleShowForm("Details");
    },
    async handleSave(showLoading, hideLoading) {
      showLoading("saving data...");
      if (await this.$refs.form.validateForm()) {
        const res = await this.$refs.form.saveForm({
          keyValue: this.formEdit ? this.formEditRow.f_Id : "",
          isEdit: this.formEdit,
        });
        if (res) {
          const msg = this.formEdit ? "更新成功!" : "Add成功!";
          this.$message({
            type: "success",
            message: this.$t(msg),
          });
          this.loadTableData();
          this.formVisible = false;
        }
      }
      hideLoading();
    },
    // 打印
    openPrint(row, printType) {
      this.printLoading = this.$loading({
        target: "document.body",
        lock: true,
        text: `打印数据Loading...`,
        spinner: "el-icon-loading",
      });
      this.formEdit = true;
      this.formEditRow = row;
      this.isPrint = true;
      this.printType = printType;
      this.handleShowForm("打印数据", true);
    },
    handleShowForm(text, isHide = false) {
      this.isHide = isHide;
      this.formTitle = text;
      this.formVisible = true;
    },
    async handleOpenedForm(showLoading, hideLoading) {
      if (this.formEdit) {
        if (!this.isPrint) {
          showLoading("Loading data...");
        }
        await this.$refs.form.loadFormData({
          keyValue: this.formEditRow.f_Id,
        });
        if (!this.isPrint) {
          hideLoading();
        } else {
          this.isPrint = false;
          if (this.printType == "word" && this.$refs.wordprintBtn) {
            await this.$refs.wordprintBtn.handleClick();
          } else if (this.printType == "common" && this.$refs.commonprintBtn) {
            await this.$refs.commonprintBtn.handleClick();
          } else {
            this.$message({
              type: "warning",
              message: "请设置打印模版编码!",
            });
          }
          this.formVisible = false;
          this.printLoading.close();
          this.printLoading = null;
        }
      }
    },
    handleCloseForm() {
      this.$refs.form.resetForm();
    },
    async getPrintData() {
      if (this.$refs.form.getPrintData) {
        const formData = await this.$refs.form.getPrintData();
        return formData;
      } else {
        return {};
      }
    },
    //插件启用
    async handleEnable($index, row) {
      this.$confirm(
        this.$t("此操作将启用插件, 是否继续?"),
        this.$t("Tips"),
        {
          confirmButtonText: this.$t("confirm"),
          cancelButtonText: this.$t("cancel"),
          type: "warning",
        }
      )
      .then(async () => {
        row.f_State = 1;
        await api.enable(row.f_Id);
        this.$message({
          type: "success",
          message: this.$t("启用成功!"),
        });
      })
      .catch(() => {
        this.$message({
          type: "info",
          message: this.$t("已cancel启用!"),
        });
      });
    },
    //插件卸载
    async handleUninstall($index, row) {
      this.$confirm(
        this.$t("此操作将卸载插件, 是否继续?"),
        this.$t("Tips"),
        {
          confirmButtonText: this.$t("confirm"),
          cancelButtonText: this.$t("cancel"),
          type: "warning",
        }
      )
      .then(async () => {
        row.f_State = 0;
        await api.uninstall(row.f_Id);
        this.$message({
          type: "success",
          message: this.$t("卸载成功!"),
        });
      })
      .catch(() => {
        this.$message({
          type: "info",
          message: this.$t("已cancel卸载!"),
        });
      });
    },
  },
};
</script>
